<template>
    <div class="login-body">
        <div class="login-container">
            <div class="head">
                <div class="name">
                    <div class="title">账号注册</div>
                </div>
            </div>
            <el-form label-position="top" :rules="state.rules" :model="state.form" ref="registerForm"
                     class="register-form">
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="state.form.name" type="text" autocomplete="off" />

                </el-form-item>
                <el-row style="height: 10px"></el-row>
                <el-form-item label="手机号" prop="phone">
                    <el-input v-model="state.form.phone" type="text" autocomplete="off" /><el-row></el-row>
                </el-form-item><el-row style="height: 10px"></el-row>
                <el-form-item label="密码" prop="pass">
                    <el-input show-password v-model="state.form.pass" type="password" autocomplete="off" /><el-row></el-row>
                </el-form-item><el-row style="height: 10px"></el-row>
                <el-form-item  label="确认密码" prop="checkPass">
                    <el-input
                            show-password
                            v-model="state.form.checkPass"
                            type="password"
                            autocomplete="off"
                    />
                </el-form-item><el-row style="height: 10px"></el-row>

                <el-form-item>
                    <div style="color: #333">注册账号表示您已同意<a>《服务条款》</a></div>
                    <el-button style="width: 100%" type="primary" @click="submitForm">注册账号</el-button>
                </el-form-item><el-row style="height: 10px"></el-row>

            </el-form>
            <b><el-link class="register" type="primary" href="/login" style="font-size: 15px">返回登录</el-link></b>
        </div>
    </div>
</template>

<script setup>

    import {reactive, ref} from 'vue'
    import {login} from '@/api/user'
    import {register} from '@/api/user'
    import {useStore} from 'vuex'
    import {useRouter} from 'vue-router'
    import {ElMessageBox, ElMessage} from 'element-plus'
    const registerForm = ref(null)
    const store = useStore()
    const router = useRouter()
    const state = reactive({
        form: {
            name:'',
            phone: '',
            pass: '',
            checkPass:''
        },
        rules: {
            name: [
                {required: 'true', message: '请输入您的真实姓名', trigger: 'blur'}
            ],
            phone: [
                {required: 'true', message: '手机号不能为空', trigger: 'blur'}
            ],
            pass: [
                {required: 'true', message: '密码不能为空', trigger: 'blur'}
            ],
            checkPass:[
                {required: 'true', message: '确认密码不能为空', trigger: 'blur'}
            ]
        }
    })
    const submitForm=()=>{
        if(state.form.pass!=state.form.checkPass){
            ElMessage.error("两次密码不同")
        }else {
            registerForm.value.validate((valid) => {
                if (valid) {
                    register(state.form).then((res) => {
                        ElMessage.success("注册成功")
                        router.push({path: "/login"})
                    })
                } else {
                    return false;
                }
            })
        }
    }
</script>

<style scoped>
    .login-body {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        background-color: #fff;
    }

    .login-container {
        position: relative;
        width: 420px;
        height: 600px;
        background-color: #fff;
        border-radius: 4px;
        box-shadow: 0px 21px 41px 0px rgba(0, 0, 0, 0.2);
    }

    .head {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 40px 0 20px 0;
    }

    .head img {
        width: 100px;
        height: 100px;
        margin-right: 20px;
    }

    .head .title {
        font-size: 28px;
        color: #1BAEAE;
        font-weight: bold;
    }

    .head .tips {
        font-size: 12px;
        color: #999;
    }

    .register-form {
        width: 70%;
        margin: 0 auto;
    }

    .register-form >>> .el-form--label-top .el-form-item__label {
        padding: 0;
    }

    .register-form >>> .el-form-item {
        margin-bottom: 0;
    }
    .register{
        position: absolute;
        bottom: 0;
        right: 0;
    }
</style>
